<template>
  <Row>
    <Col span="16" offset="3">
    <div style="background:#eee;padding: 20px">
      <Card :bordered="false">
        <p slot="title">添加一个商家</p>
        <Form ref="formItem" :model="formItem" :label-width="120" :rules="ruleValidate">
          <Row>
            <Col span="11">
            <FormItem label="店铺名称" prop="storeName">
              <Input v-model="formItem.storeName" placeholder="请输入店铺名称"></Input>
            </FormItem>
            </Col>
            <Col span="11">
            <FormItem label="店铺地址" prop="address">
              <Input v-model="formItem.address" placeholder="请输入店铺地址"></Input>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="11">
            <FormItem label="起送价" prop="startprice">
              <Input v-model="formItem.startprice" placeholder="请输入起送价"></Input>
            </FormItem>
            </Col>
            <Col span="11">
            <FormItem label="配送费" prop="transportprice">
              <Input v-model="formItem.transportprice" placeholder="请输入配送费"></Input>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="11">
            <FormItem label="商家电话" prop="tel">
              <Input v-model="formItem.tel" placeholder="请输入商家电话"></Input>
            </FormItem>
            </Col>
            <Col span="11">
            <FormItem label="商家账号" prop="account">
              <Input v-model="formItem.account" placeholder="请输入商家账号"></Input>
            </FormItem>
            </Col>
          </Row>
          <FormItem label="请选择营业时间">
            <Row>
              <Col span="6">
              <FormItem prop="starttime">
                <TimePicker type="time" placeholder="开始营业时间" v-model="formItem.starttime"></TimePicker>
              </FormItem>
              </Col>
              <Col span="11" prop="endtime">
              <FormItem prop="endtime">
                <TimePicker type="time" placeholder="营业结束时间" v-model="formItem.endtime"></TimePicker>
              </FormItem>
              </Col>
            </Row>
          </FormItem>
          <FormItem label="店铺公告" prop="note">
            <Input v-model="formItem.note" type="text" placeholder="请输入店铺公告"></Input>
          </FormItem>
          <FormItem label="优惠活动" prop="cheanpen">
            <Input v-model="formItem.cheanpen" type="text" placeholder="请输入优惠活动"></Input>
          </FormItem>
          <FormItem label="新用户优惠" prop="newuser">
            <Input v-model="formItem.newuser" type="text" placeholder="请输入新用户优惠"></Input>
          </FormItem>
          <FormItem>
            <Button type="success" @click="handleSubmit('formItem')">添加</Button>
          </FormItem>
        </Form>
      </Card>
    </div>
    </Col>
  </Row>

</template>

<script>
  export default {
    name: 'Addstore',
    data () {
      return {
        formItem: {
          storeName: '',
          address: '',
          tel: '',
          account: '',
          startprice: '',
          transportprice: '',
          starttime: '',
          endtime: '',
          note: '',
          cheanpen: '',
          newuser: ''
        },
        ruleValidate: {
          storeName: [
            {required: true, message: '请输入店铺名称', trigger: 'blur'}
          ],
          address: [
            {required: true, message: '请输入店铺地址', trigger: 'blur'}
          ],
          tel: [
            {required: true, message: '请输入商家电话', trigger: 'change'}
          ],
          account: [
            {required: true, message: '请输入商家账号', trigger: 'change'}
          ],
          startprice: [
            {required: true, message: '请输入起送价', trigger: 'change'}
          ],
          transportprice: [
            {required: true, message: '请输入配送费', trigger: 'change'}
          ],
          starttime: [
            {required: true, message: '请选择开始营业时间', trigger: 'change'}
          ],
          endtime: [
            {required: true, message: '请选择营业结束时间', trigger: 'change'}
          ],
          note: [
            {required: true, message: '请输入店铺公告', trigger: 'blur'}
          ],
          cheanpen: [
            {required: true, message: '请输入优惠活动', trigger: 'blur'}
          ],
          newuser: [
            {required: true, message: '请输入新用户优惠', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            console.log(this.formItem)
          } else {
            this.$Message.error('Fail!')
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
